<template>
  <div id="dynamic">
    <span class="title">{{ $t('common.newdong') }}</span>
    <span class="checkAll" @click="checkAll">{{ $t('common.all') }}</span>
    <div v-if="isEmpty" class="box">
      <a-empty :image="simpleImage" />
    </div>
    <div
      v-else
      class="msgBox"
      v-for="(item, index) in dynamicItem.slice(0, showItem)"
      :key="index"
    >
      <div class="time-line">
        <a-divider type="vertical" :dashed="false" />
        <div class="bullet"></div>
      </div>
      <div class="msg">
        <div class="msg-date">
          {{ new Date(item.updateTime).Format('YYYY-MM-DD HH:mm:ss') }}
        </div>
        <div class="msg-size isRead">
          <span class="msg-title">
            {{ item.title }}
          </span>
          <span class="msg-content">
            {{ item.content }}
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { requestHttp, maccApi, zhugePoint } from '@utils/index';
import { Empty } from 'ant-design-vue';
export default {
  data() {
    return {
      dynamicItem: [],
      borderHight: 0,
      //获取动态信息条数
      dynamicNum: 20,
      showItem: 0,
      //单条消息框高度
      msgHight: 87,
      //数据是否为空
      isEmpty: true,
      simpleImage: Empty.PRESENTED_IMAGE_SIMPLE,
    };
  },
  mounted() {
    this.getDynamic();
    const self = this;
    //根据框高判断显示条数
    this.getHigh();
    this.showItem = parseInt(this.borderHight / this.msgHight);
    window.onresize = () => {
      this.getHigh();
    };
  },
  created() {},
  destroyed() {
    window.onresize = null;
  },

  methods: {
    // 获取站内动态信息
    async getDynamic() {
      const res = await requestHttp({
        api:
          maccApi.INTERNAL_MESSAGE_GET_API +
          `?last_id=0&limit=${this.dynamicNum}`,
        method: 'GET',
      });
      if (res.data.list.length != 0) {
        this.isEmpty = false;
        this.dynamicItem = res.data.list;
      }
    },
    checkAll() {
      console.log('跳转日志列表界面');
      //跳转界面
      this.$iframeMsg('GOTO_HASH', {
        hash: 'maintenance_logs_operationlog_menu',
        param: {},
      });
    },
    getHigh() {
      if (document.getElementById('dynamic')) {
        this.borderHight = document.getElementById('dynamic').offsetHeight - 55;
      }
    },
  },
  watch: {
    borderHight: {
      handler(val) {
        let k = val / this.msgHight;
        this.showItem = parseInt(k);
      },
      immediate: true,
    },
  },
};
</script>

<style scoped>
#dynamic {
  width: 100%;
  height: 100%;
  position: relative;
  pointer-events: auto;
  color: black;
  overflow: hidden;

  background: #ffffff;
  border-radius: 4px;
}

.title {
  position: absolute;
  left: 14px;
  top: 14px;
  color: black;
  font-family: Source Han Sans CN;
  font-style: normal;
  font-weight: normal;
  font-size: 12px;
  line-height: 18px;
}
.checkAll {
  position: absolute;
  right: 14px;
  top: 14px;
  font-family: Source Han Sans CN;
  font-style: normal;
  font-weight: normal;
  font-size: 12px;
  line-height: 18px;
  color: black;
  cursor: pointer;
}
ul {
  position: relative;
  bottom: 0;
  left: 4.83%;
  width: 100%;
  text-align: left;
}
li {
  list-style: none;
}
.msgBox {
  position: relative;
  top: 40px;
  height: 90px;
  display: flex;
}
.time-line {
  flex-grow: 1;
  height: 100%;
  display: flex;
  width: 0;
  align-items: center;
  flex-direction: column;
}
.msg {
  flex-grow: 9;
  height: 100%;
  background-color: white;
  text-align: left;
  width: 0;
}
.ant-divider {
  height: 87px;
}
.ant-divider-dashed {
  border-color: #8c8c8c;
}
.bullet {
  width: 7px;
  height: 7px;
  background-color: #2b6afd;
  box-sizing: border-box;
  border-radius: 50%;
  margin-top: -70px;
  z-index: 1;
}
.msg-size {
  height: 64px;
  margin-right: 0.5rem;
  padding: 4px;
}
.msg-date {
  font-family: Source Han Sans CN;
  font-style: normal;
  font-weight: normal;
  font-size: 12px;
  margin-top: 8px;
}
.msg-title {
  font-family: Source Han Sans CN;
  font-style: normal;
  font-weight: normal;
  font-size: 12px;
  line-height: 18px;
}
.msg-content {
  font-family: Source Han Sans CN;
  font-style: normal;
  font-weight: normal;
  font-size: 12px;
  line-height: 12px;
  color: #8c8c8c;
  margin-top: 1.5%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.isRead {
  background-color: #fafafa;
}
.isNotread {
  background: #fdf5f4;
}

.box {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
